@font-face {
    font-family: 'Coolvetica';
    src: url('fonts/Coolvetica-Regular.woff2') format('woff2'),
        url('fonts/Coolvetica-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Blacklisted';
    src: url('fonts/Blacklisted.woff2') format('woff2'),
        url('fonts/Blacklisted.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


html, body {
    background-color:lightskyblue;
    display:flex;
    flex-direction:row;
    margin:0;
    padding:0;

    min-width:100%;
    min-height:100%;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

a:visited {
    color:white;
}

a:link {
    color:white;
}

#left-sidebar {
    font-family: 'Coolvetica', sans-serif;
    position:relative;
    display:flex;
    width: 40%;
    height: 100%;
    background:linear-gradient(to bottom, rgba(0, 0, 0, 0.425) 0%, rgb(0, 0, 0) 100%), url('images/shibuya.jpg') no-repeat;
    color:white;
    align-items:flex-end;
    justify-content: center;

}

#logo-bundle {
    display:flex;
    position:absolute;
    width:100%;
    height: 20%;
    background-color:rgba(0, 0, 0, 0.349);
    justify-content:center;
    align-items:center;
    bottom:65%;
    gap:5%;
}

#logo-bundle > p {
    font-family: "Blacklisted", sans-serif;
    font-size: clamp( 10px, calc(40vw / 5), 100px);
}

#logo-bundle img {
    height:100%;
    object-fit:contain;
}

#right-side {
    font-family: "Coolvetica", sans-serif;
    color:rgb(199, 191, 207);
    display:flex;
    flex-direction:column;
    background-color:rgb(145, 150, 152);
    width:70%;
    height:100%;
}

#top-right {
    font-size: clamp(5px, calc(2vw), 30px);
    box-sizing:border-box;
    padding-left:2%;
    padding-right:15%;
    display:flex;
    flex-direction: column;
    background-color:#2f2f32;
    width: 100%;
    height:33%;
    justify-content:flex-end;
}

#mid-right  {
    box-sizing:border-box;
    padding-bottom:3%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    font-size: clamp(5px, calc(1.2vw), 30px);
    color:white;
    box-sizing:border-box;
    padding-left:2%;
    background-color:rgb(33, 32, 36);
    width:100%;
    height:43%;
}

#form {
    font-size:1.1vw;
    display:flex;
    flex-direction:column;
    height:100%;
    gap:15%;
}

.form-section{
    display:flex;
    flex-direction:row;
    gap: 10%;
}

.form-item {
    font-size: .95em;
    height:100%;
    display:flex;
    flex-direction:column;
    gap: 10%;
}

input { 
    border-color:#9056d8;
    border-radius:3px;
    border-width:3px;
    transition:.5s;
}

input:focus {
    border-color:rgb(0, 255, 225);
    transition:.5s;
    outline:none;
}

input:invalid {
    border-color:#de1e1e;
    transition:.5s;
}

#bot-right {
    box-sizing:border-box;
    padding:2%;
    background-color:#2d2d2f;
    width:100%;
    height:24%;
}

#button {
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5em;
    color:rgb(240, 237, 243);
    background-color: rgb(34, 90, 95);
    width:15%;
    height:30%;
    border-radius:10px;
    user-select:none;
    transition:.5s;
}

#button:hover {
    background-color: rgb(172, 219, 219);
    color:rgb(62, 62, 92);
    transition:.5s;
}