:root {
    --black: #000;
    --white: #fff;
    --red: #ce0b13;
    --gray-light: #f6f6f6;
    --gray: #434445;
    --magenta: #f15a24;
    --dark-magenta: #9e2b00;
    --dark-blue: #051121;
    --bg-color: #051121;
    --blue: #29abe2;
}

body {
    font-family: "Poppins", sans-serif;
}

header {
    padding-top: 3rem;
    padding-bottom: 1rem;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    transition: all 0.3s;
    z-index: 10;
}

header.scrolled {
    background-color: var(--dark-blue);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    padding-top: 1rem;
}

.logo img {
    width: 120px;
    transition: all 0.3s;
}

header.scrolled .logo img {
    width: 80px;
}

.nav-link {
    color: var(--white);
    font-weight: 700;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--magenta);
}

.section-intro {
    padding-top: 16rem;
    padding-bottom: 12rem;
    text-align: right;
    background-image: url(../img/bg-floorball.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    max-height: 774px;
}

.intro-logo {
    width: 400px;
    margin-right: 4rem;
}

.intro-ball {
    width: 400px;
    transform: translateX(-60px);
}

.four-balls {
    transform: translateY(-120px);
}

.ball {
    background-color: var(--white);
    padding: 2rem;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    width: 15rem;
    height: 15rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--magenta);
    border-radius: 50%;
    margin: auto;
    font-weight: 700;
}

.ball img {
    width: 5rem;
    margin-bottom: 1rem;
}

.bars,
.close-menu {
	display: none;	
}

@media(max-width: 767px) {
    header {
        padding-top: 1rem;
    }
    .logo img {
        width: 80px;
        transition: all 0.3s;
    }
    header.scrolled .logo img {
        width: 40px;
    }
    .section-intro {
        background-size: cover;
    }
    .intro-ball {
        width: 160px;
        transform: translateX(-20px);
    }
    .intro-logo {
        width: 240px;
        margin-right: 0;
    }
	.nav {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background: var(--bg-color);
		padding: 6rem 2rem 2rem;
	}
	.bars { 
		display: block;
		padding: 4px;
	}
	.bars svg,
	.close-menu svg {
		width: 1.5rem;
		height: 1.5rem;
	}
	.bars svg path,
	.close-menu svg {
		fill: var(--white);
	}
	.close-menu {
		z-index: 120;
		position: fixed;
		right: 1rem;
		top: 2.25rem;
	}
	.logo {
		z-index: 120;
	}
    .ball {
        margin-bottom: 1rem;
    }
}

@media(max-width: 425px) {
    .intro-logo {
        width: 180px;
    }
}

.main-section {
    background-color: var(--gray-light);
    padding-bottom: 8rem;
    padding-top: 4rem;
}

.main-section h1 {
    color: var(--magenta);
    font-weight: 800;
    margin-bottom: 1rem;
}

footer {
    background-color: var(--dark-blue);
    padding-top: 6rem;
    padding-bottom: 4rem;
    color: var(--white);
    position: relative;
}

footer::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 197px;
    height: 161px;
    background-image: url(../img/ball.png);
    background-size: contain;
    margin-left: -70px;
    margin-bottom: -100px;
}

.footer-logo {
    width: 160px;
    margin-right: 2rem;
}

.main-section h2 {
    color: var(--magenta);
    font-weight: 700;
}

.team-column hr {
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.team-column a {
    text-decoration: none;
    color: var(--dark-blue);
    margin-bottom: 2rem;
    display: block;
}

.team-column a:hover {
    color: var(--magenta);
}

.team-column a img {    
    transition: all 0.3s;
    max-height: 220px;
}

.team-column a:hover img {    
    transform: scale(1.1);
}

.team-intro img {
    height: 320px;
    margin-bottom: 1.5rem;
}

.team-intro h1 {
    font-weight: 800;
    color: var(--white);
    font-size: 3rem;
}

.player-card {
    position: relative;
    width: 400px;
    height: 569px;
    border-radius: 1rem;
    color: var(--white);
}

.img-player {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 1rem;
}

.img-player-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 569px;
    border-radius: 1rem;
    -o-object-fit: cover;
    object-fit: cover;
}

.player-name {
    position: absolute;
    right: 2rem;
    top: 2rem;
    font-size: 1.85rem;
    font-weight: 700;
}

.rating {
    position: absolute;
    left: 2rem;
    bottom: 1rem;
    font-size: 2rem;
    font-weight: 700;
}

.team-name {
    position: absolute;
    right: 2rem;
    top: 6rem;
    font-weight: 400;
    font-size: 1.5rem;
}

.sub-section {
    background: var(--white);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.number {
    background-color: var(--magenta);
    color: var(--white);
    font-weight: 800;
    font-size: 3rem;
    padding: 2rem;
    width: 7rem;
    height: 7rem;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.sub-section h2 {
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dark-magenta);
}

.img-club-results {
    width: 1rem;
    margin-top: -3px;
}

.btn-red {
    background-color: var(--magenta);
    color: var(--white);
    border: 0;
}

.btn-red:hover,
.btn-red:focus,
.btn-red:active {
    background-color: var(--dark-magenta);
    color: var(--white);
    border: 0;
}

.btn-red svg {
    fill: var(--white);
    width: 1.25rem;
    margin-right: 4px;
}

.play {
    display: inline-flex;
    align-items: center;
}

.modal-title {
    font-weight: 700;
}

.modal-title img {
    width: 2rem;
    margin-right: 4px;
}

@media(max-width: 767px) {
    .player-card {
        width: 100%;
        margin-bottom: 2rem;
    }
    .img-player {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
    }
    .img-player-card {
        width: 100%;
    }
}

.card-player {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
}

.card-player-img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 3rem;
}

.card-player-template {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.card-player-name {
    position: absolute;
    left: 15%;
    top: 5.2%;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--dark-blue);
}

.card-player-number {
    position: absolute;
    left: 0%;
    top: 79%;
    width: 100%;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--dark-blue);
    text-align: center;
}

.card-player-team {
    position: absolute;
    left: 0%;
    top: 84%;
    width: 100%;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--dark-blue);
    text-align: center;
}

.card-player-strength,
.card-player-speed {
    position: absolute;
    font-size: 0.8125rem;
    color: var(--dark-blue);
    top: 92%;
}

.card-player-strength {
    left: 10%;
}

.card-player-speed {
    left: 56%;
}

.card-player-strength-bar,
.card-player-speed-bar {
    position: absolute;
    width: 50px;
    height: 5px;
    left: 27%;
    top: 93.2%;
}

.card-player-speed-bar {
    left: 70%;
}

.card-player-yellow .card-player-strength-bar,
.card-player-yellow .card-player-speed-bar {
    background-color: #f0ca2f;
}

.card-player-green .card-player-strength-bar,
.card-player-green .card-player-speed-bar {
    background-color: #7ec83d;
}

.card-player-magenta .card-player-strength-bar,
.card-player-magenta .card-player-speed-bar {
    background-color: #9054c6;
}

.card-player-blue .card-player-strength-bar,
.card-player-blue .card-player-speed-bar {
    background-color: #29a7ce;
}

.card-player-orange .card-player-strength-bar,
.card-player-orange .card-player-speed-bar {
    background-color: #f04314;
}

.card-player-bull .card-player-strength-bar,
.card-player-bull .card-player-speed-bar {
    background-color: #00ccff;
}

.card-player-frogs .card-player-strength-bar,
.card-player-frogs .card-player-speed-bar {
    background-color: #6dc79c;
}

.card-player-chameleon .card-player-strength-bar,
.card-player-chameleon .card-player-speed-bar {
    background-color: #a7fc2f;
}

.link-3v3 {
    width: 2rem;
}