@font-face {
    font-family: Campton;
    src: url('./assets/font/CamptonBook.otf');
}

body {
    overflow-x: none;
    background-color: #D9D9D9;
    user-select: none;
}

.top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 19.2vh;
    background: #171717;
    border-radius: 0vh 0vh 4vh 4vh;
}

.top .img {
    display: inline-block;
    margin-top: -1vh;
    margin-left: 2vh;
    width: 19.2vh;
}

.top .onex {
    position: relative;
    display: inline-block;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 500;
    font-size: 4vh;
    color: #FFFFFF;
    top: -9vh;
}

.top .rp {
    position: relative;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 300;
    font-size: 2.4vh;
    color: #FFFFFF;
    top: -6.5vh;
    left: -12vh;
}

.top .pasirinkimai {
    position: relative;
    top: -8vh;
    left: -2vh;
    display: inline-block;
}

.pasirinkimai a {
    display: inline-block;
    padding: 1vh;
    margin-right: 2vh;
    position: relative;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 400;
    font-size: 2.4vh;
    color: #FFFFFF;
}

.pasirinkimai a .border {
    position: absolute;
    bottom: 0.2vh;
    left: 25%;
    display: inline-block;
    width: 50%;
    height: 0.05vh;
    background: #FFFFFF;
}

.main {
    display: block;
    position:relative;
    margin-top: 25vh;
}

.main .text {
    text-align: center;
}

.text .bordered {
    font-family: 'Campton';
    font-style: normal;
    font-weight: 550;
    font-size: 6vh;
    color: #0000;
    -webkit-text-stroke: 0.1vh black; /* width and color */
}

.text .normal {
    position: relative;
    top: -6.2vh;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 600;
    font-size: 5.5vh;
    color: #000000;
}

.main .img {
    display: inline-block;
    margin-left: 10vh;
}

.main .aprasymas {
    display: inline-block;
    position: relative;
    top: -7vh;
    left: 5.5vh;
}

.aprasymas .title {
    font-family: 'Campton';
    font-style: normal;
    font-weight: 600;
    font-size: 3.2vh;
    color: #000000;
}

.aprasymas .desc {
    display: block;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 400;
    font-size: 2.4vh;
    max-width: 40.3vh;
    color: #000000;
}

.main .right {
    display: inline-block;
    position: relative;
    top: -16vh;
    margin-left: 25vh;
}

.main .box {
    position: relative;
    display: inline-block;
    width: 27vh;
    height: 18vh;
    background: linear-gradient(295.05deg, #171717 39.29%, rgba(23, 23, 23, 0) 197.97%);
    border-radius: 3vh;
    margin-right: 4vh;
}

.box .text {
    display: inline-block;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 500;
    font-size: 2.4vh;
    color: #FFFFFF;
    position: relative;
    top: 2vh;
    left: 2vh;
}

.box .img {
    display: inline-block;
    position: relative;
    top: 3vh;
    left: -8vh;
}

.box .members {
    display: inline-block;
    position: relative;
    top: 1vh;
    left: -4.5vh;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 500;
    font-size: 2.4vh;
    color: #7CB9FF;
}

.box button {
    display: inline-block;
    position: relative;
    top: 4.5vh;
    background: linear-gradient(271.98deg, #5D7EA5 4.65%, rgba(93, 126, 165, 0) 175.95%);
    border-radius: 3vh;
    width: 20vh;
    height: 3vh;
    border: none;
    outline: none;

    font-family: 'Campton';
    font-style: normal;
    font-weight: 500;
    font-size: 2vh;
    color: #FFFFFF;
}

.box button .left {
    margin-left: -1.5vh;
    float: left;
}

.box button i {
    position: relative;
    top: 0.2vh;
    margin-right: 1vh;
    float: right;
}

.box button:hover {
    background: linear-gradient(271.98deg, #90C4FF 4.65%, rgba(141, 190, 250, 0) 175.95%);
}

.main .gidas {
    display: block;
    margin-bottom: 2vh;
}

.gidas .img {
    display: inline-block;
    position: relative;
}

.gidas .name {
    display: inline-block;
    position: relative;
    top: -25vh;
    left: 5vh;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 600;
    font-size: 3.6vh;
    color: #000000;
}

.gidas .desc {
    display: block;
    position: relative;
    top: -25vh;
    left: 60.25vh;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 400;
    font-size: 2.4vh;
    color: #000000;
    max-width: 90vh;
}


::-webkit-scrollbar {
    width: 0;
}

::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0); 
}

::-webkit-scrollbar-thumb {
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #3e78ce00; 
}

.main .left {
    display: block;
    position: relative;
    width: 3vh;
    left: 3vh;
}

.left .rule_type {
    display: block;
    position: relative;
    width: 23vh;
    height: 6vh;

    margin-top: 1vh;
    background: #171717;
    border-radius: 2vh;
    border: none;
    outline: none;
}

.left button:hover {
    background: #313131;
}

.rule_type a {
    margin-left: 1.5vh;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 400;
    font-size: 3vh;
    color: #FFFFFF;

    float: left;
}

.main .rules {
    position: absolute;
    top: 15.5vh;
    left: 30vh;
}

.rules .rule {
    display: block;
    width: 120vh;
    background: #171717;
    border-radius: 2vh;
}

.rules .rule2 {
    border-radius: 2vh 2vh 0vh 0vh;
}

.rule a {
    display: inline-block;
    padding: 1vh;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 400;
    font-size: 2.4vh;
    color: #FFFFFF;
    margin-left: 2vh;
}

.rule i {
    display: inline-block;
    padding: 1vh;
    font-size: 2.4vh;
    color: #FFFFFF;
    position: relative;
    float: right;
    top: 0.5vh;
    right: 2vh;
}

.rules .show {
    display: block;
    width: 120vh;
    min-height: 4.6vh;
    padding-bottom: 0.1vh;
    background: #171717;
    border-radius: 0vh 0vh 2vh 2vh;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 300;
    font-size: 1.6vh;
    color: #FFFFFF;
}

.show a {
    display: block;
    padding: 1vh;
    margin-left: 2vh;
}

.komanda {
    display: block;
    position: absolute;
    margin-top: 30vh;
    left: 50%;
    transform: translate(-50%, -50%);
}

.komanda .narys {
    display: inline-block;
    margin-right: 2vh;
    margin-bottom: 3vh;
    background: url('./assets/images/nariai.png');
    background-repeat: no-repeat;
    background-size: 21.7vh 18.8vh;
    width: 21.7vh;
    height: 18.8vh;
}

.narys .img {
    display: inline-block;
    width: 9vh;
    height: 9vh;
    background: url(image.png);
    border-radius: 2vh;
    position: relative;
    left: -3vh;
    top: 4vh;
}

.narys .name {
    display: inline-block;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 500;
    font-size: 1.4vh;
    text-align: center;
    color: #FFFFFF;
    position: relative;
    top: 5vh;
}

.narys .role {
    display: inline-block;
    font-family: 'Campton';
    font-style: normal;
    font-weight: 400;
    font-size: 1.4vh;
    text-align: center;
    color: #A7A7A7;
    position: relative;
    top: 3vh;
}

@media only screen and (max-width: 760px) {
    .top {
        position: absolute;
        left: 0;
        top: 0;
        width: 110%;
        height: 28vh;
        background: #171717;
        border-radius: 0vh 0vh 4vh 4vh;
    }
    #image {
        display: none;
    }
    .top .img {
        display: inline-block;
        margin-top: -1vh;
        margin-left: 3vh;
        width: 19.2vh;
    }
    .top .onex {
        position: relative;
        display: inline-block;
        font-family: 'Campton';
        font-style: normal;
        font-weight: 500;
        font-size: 4vh;
        color: #FFFFFF;
    }
    .top .rp {
        position: relative;
        font-family: 'Campton';
        font-style: normal;
        font-weight: 300;
        font-size: 2.4vh;
        color: #FFFFFF;
        top: -6.5vh;
        left: -13.5vh;
    }
    .main {
        display: block;
        position:relative;
        margin-top: 30vh;
        width:100%;
        max-width: 100%;
        height: auto;
    }
    .main .aprasymas {
        display: inline-block;
        position: relative;
        top: -7vh;
        left: 5.5vh;
        text-align: center;
    }
    .main .right {
        display: inline-block;
        position: relative;
        top: 2vh;
        left: -13.5vh;
    }
    .box button {
        display: inline-block;
        position: relative;
        top: 3.3vh;
        background: linear-gradient(271.98deg, #5D7EA5 4.65%, rgba(93, 126, 165, 0) 175.95%);
        border-radius: 3vh;
        width: 20vh;
        height: 3vh;
        border: none;
        outline: none;
    
        font-family: 'Campton';
        font-style: normal;
        font-weight: 500;
        font-size: 2vh;
        color: #FFFFFF;
    }
    .top .pasirinkimai {
        position: relative;
        top: -2.5vh;
        left: 2vh;
        display: inline-block;
    }

    .main .aprasymas {
        display: inline-block;
        position: relative;
        margin-top: 2vh;
    }

    .gidas .img {
        display: inline-block;
        position: relative;
        left: -10vh;
        width: 20vh;
    }

    .gidas .name {
        display: inline-block;
        position: relative;
        top: -12.5vh;
        left: -8vh;
        font-family: 'Campton';
        font-style: normal;
        font-weight: 600;
        font-size: 2vh;
        color: #000000;
    }
    
    .gidas .desc {
        display: block;
        position: relative;
        top: -12vh;
        left: 22.8vh;
        font-family: 'Campton';
        font-style: normal;
        font-weight: 400;
        font-size: 1vh;
        color: #000000;
        max-width: 25vh;
    }

    .main .left {
        display: block;
        width: 2vh;
        margin-left: -1vh;
    }
    
    .left .rule_type {
        display: block;
        position: relative;
        width: 15vh;
        height: 3vh;
    
        margin-top: 1vh;
        background: #171717;
        border-radius: 2vh;
        border: none;
        outline: none;
    }
    
    .left button:hover {
        background: #313131;
    }
    
    .rule_type a {
        margin-left: 1.5vh;
        font-family: 'Campton';
        font-style: normal;
        font-weight: 400;
        font-size: 1.5vh;
        color: #FFFFFF;
    
        float: left;
    }
    
    .main .rules {
        position: absolute;
        top: 14.5vh;
        left: 20vh;
    }
    
    .rules .rule {
        display: block;
        width: 25vh;
        background: #171717;
        border-radius: 2vh;
    }
    
    .rules .rule2 {
        border-radius: 2vh 2vh 0vh 0vh;
    }
    
    .rule a {
        display: inline-block;
        padding: 0.5vh;
        font-family: 'Campton';
        font-style: normal;
        font-weight: 400;
        font-size: 1.5vh;
        color: #FFFFFF;
        margin-left: 1vh;
    }
    
    .rule i {
        display: none;
    }
    
    .rules .show {
        display: block;
        width: 25vh;
        min-height: 2vh;
        padding-bottom: 0.1vh;
        background: #171717;
        border-radius: 0vh 0vh 2vh 2vh;
        font-family: 'Campton';
        font-style: normal;
        font-weight: 300;
        font-size: 1.1vh;
        color: #FFFFFF;
    }
    
    .show a {
        display: block;
        padding: 0.5vh;
        margin-left: 2vh;
    }

    .komanda {
        display: block;
        position: relative;
        top: 26vh;
        left: 52%;
        transform: translate(-50%, -50%);
        height: 100%;
    }   
    
    .narys .name {
        display: inline-block;
        font-family: 'Campton';
        font-style: normal;
        font-weight: 500;
        font-size: 1.4vh;
        text-align: center;
        color: #FFFFFF;
        position: relative;
        top: 4vh;
    }
    
    .narys .role {
        display: inline-block;
        font-family: 'Campton';
        font-style: normal;
        font-weight: 400;
        font-size: 1.4vh;
        text-align: center;
        color: #A7A7A7;
        position: relative;
        top: 1vh;
    }
}