@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap');
@keyframes rotateY {
    100% {
        transform: rotateY(360deg);
    }
}

* {
    box-sizing: border-box;
    outline: none;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    font-size: 10px;
}

a,
button {
    transition: all .25s ease-in-out;
    text-decoration: none;
}

body {
    font-size: 0;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    background-color: #e5eeee;
    color: #ffffff;
}

main {
    background: #b9b9b9 #ff2b58;
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    padding: 1rem;
}

.flex {
    /* border: 1px solid #ff2b58; */
    max-width: 400px;
    max-height: 500px;
    /* remove */
    min-height: 500px;
    min-width: 400px;
    /* remove */
    margin: auto;
    overflow: hidden;
    display: flex;
    position: relative;
    background: radial-gradient(circle at 100% -20%, rgba(198, 108, 214, 0.8) 20%, #3023ae 105%);
    box-shadow: 0 40px 30px -20px rgba(0, 0, 0, 0.7);
}

.flex img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-32%, -50%);
    opacity: 1;
    pointer-events: none;
    z-index: -1;
}

.flex__container {
    /* border: 1px solid #ff2b58; */
    margin: auto;
    width: 260px;
    min-height: 403px;
}

.navig>label {
    margin-right: 25px;
    cursor: pointer;
    transition: all .25s ease-in-out;
    font-size: 1.8rem;
}

.navig>input:checked+label {
    border-bottom: 2px solid rgba(255, 12, 0, .5);
    color: #fff;
}

.navig>input:not(:checked)+label {
    border-bottom: 2px solid rgba(255, 12, 0, .0);
    color: #e1c2f1;
}

.navig>input:not(:checked)+label:hover {
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
}

.form {
    font-size: 1.6rem;
    margin: 50px 0 0 0;
}

.form label {
    cursor: pointer;
}

#join:not(:checked)+label+.form {
    display: block;
}

#join:not(:checked)+label+.form+.form {
    display: none;
}

#join:checked+label+.form {
    display: none;
}

#join:checked+label+.form+.form {
    display: block;
}

.form input {
    margin: 10px 0 20px;
    height: 40px;
    border: 2px solid #968996;
    background: transparent;
    padding-left: 10px;
    color: #fff;
}

.form input:focus:valid {
    border: 2px solid #00ff73;
}

.form input:focus:invalid {
    border: 2px solid #ff0080;
}

.keep {
    cursor: pointer;
    display: flex;
    width: fit-content;
    font-size: 1.3rem;
}

.mark {
    display: inline-block;
    height: 1.6rem;
    width: 1.6rem;
    margin: auto 1rem auto 0;
    background-color: #23ae92;
    cursor: pointer;
    vertical-align: middle;
    font-size: 1.3rem;
}


/* Create the checkmark/indicator (hidden when not checked) */

.mark:after {
    content: "";
    height: 1.2rem;
    width: 1.2rem;
    display: none;
    margin: 0 0 0 0.5rem;
}


/* Show the checkmark when checked */

.keep input:checked+span:after {
    display: block;
}


/* Style the checkmark/indicator */

.keep .mark:after {
    width: 0.5rem;
    height: 1rem;
    border: solid #fff;
    border-width: 0 0.3rem 0.3rem 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.btn {
    margin: 40px 0 35px;
    height: 45px;
    border: 1px solid #23ae92;
    background: rgba(35, 174, 146, 1);
    color: #fff;
    font-weight: 700;
    font-size: 1.8rem;
}

.btn:hover,
.btn:focus,
.btn:active {
    background: rgba(35, 174, 146, 0);
}

.add {
    display: flex;
    justify-content: space-between;
}

.add_link {
    font-size: 1.3rem;
    font-weight: 400;
    color: #b9b9cc;
    border-bottom: 1px solid #b9b9cc;
    cursor: pointer;
}


/* Logo */

.link {
    transition: all 3s ease-in-out;
    position: relative;
    width: 30px;
    animation: rotateY 6s linear infinite;
}

.fav-link:hover .link,
.fav-link:focus .link {
    animation: rotateY 1s linear infinite;
}

.fav-link:active .link {
    animation-play-state: paused;
}

.fav-link {
    /* border: 1px solid black; */
    position: fixed;
    top: 2rem;
    right: 2rem;
}


/* Helpers */

.lg {
    width: 100%;
}

.hidden {
    display: none;
}