@font-face {
  font-family: "Virtue";
  src: local('src/virtue.ttf');
}

@font-face {
    font-family: "Monaco";
    src: url('src/monaco.ttf') format('truetype');

}
@font-face {
    font-family: "FragmentMono";
    font-style: normal;
    font-weight: normal;
    src: url('src/FragmentMono-Regular.ttf') format('truetype');
}  

.textbox{
    font-family: 'Monaco', 'FragmentMono';
    font-style: normal;
    font-weight: 100;
    font-size: 15px;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5px;
}
.boxleft {
    float: left;
    width: 30%;
    height: 146px;
    text-align: center;
    border: solid grey;
    border-right: none;
    background-color: lightgrey;
}
.boxmid {
    float: left;
    width: 33%;
    height: 146px;
    text-align: center;
    border: solid grey;
    background-color: lightgrey;
}
.boxright {
    float: left;
    width: 30%;
    height: 146px;
    text-align: center;
    border: solid grey;
    border-left: none;
    background-color: lightgrey;
}
.container {
    margin: auto;
    width: 380px;
}
.imgcontainer{
    padding: 15px;
    text-align: center;
    margin: 2%;
}
.imgcontainer[name="homephoto"]{
    margin: 0%;
}
a {
    font-family: 'Monaco', 'FragmentMono';
    font-style: normal;
    font-weight: 100;
    font-size: 75%;
    text-decoration: none;
    color: blue;
}
.largecontainer{
    width: 100%;
}
.tinytext {
    font-family: 'Monaco', 'FragmentMono';
    font-style: normal;
    font-weight: 100;
    font-size: 12px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 2%;
}
.containergrey {
    background-color: lightgrey;
    width: 90%;
    margin: auto;
    border: solid grey;
}

.containergrey[name="contact-container"]{
    margin-top: 4%;
}

.albumcover-container {
    text-align: center;
    float: left;
    width: 25%;
    height: 25%;
}

.albumcover-container img {
    width: 32%; 
    height: auto;
    box-shadow: 4px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 4%;
    margin-top: 10%;
    border: 1px solid black;
}

.albumcover-container span {
    display: block;
    font-family: 'Monaco', 'FragmentMono';
    font-weight: normal;
    font-size:98%;
    color: black;
}

.video-container {
    text-align: center;
    width: 80%;
    height: 80%;
    margin: auto;
}

.video-container span {
    display: block;
    font-family: 'Monaco',  'FragmentMono';
    font-weight: normal;
    font-size:98%;
    color: black;
}

.button-container span {
    font-family: 'Monaco', 'FragmentMono';
}

.simple-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #9c9c9c;
    color: black;            
    border: 2px solid black; 
    text-decoration: none;
    font-size: 16px;
    font-family: 'Monaco';
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    margin-bottom: 2%;
    box-shadow: 4px 4px rgba(0, 0, 0, 0.5);
}

.simple-button:hover {
    background-color: #d0d0d0;
}

.button-disabled {
    background-color: #d0d0d0;
    color: black; 
    cursor: not-allowed;
}


form {
    display: flex;
    width: 90%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    gap: 20px;
}

.form-group label {
    font-weight: bold;
    font-family: 'Monaco', 'FragmentMono';
    font-size: 98%;
}

.required {
    font-size: 70%;
    color: #666666;
}

.name-fields {
    display: flex;
    gap: 10px;
}

.name-fields input {
    width: 100%;
}

input, textarea {
    width: 100%;
    padding: 10px;
    font-size: 98%;
    font-family: 'Monaco', 'FragmentMono';
    border: 1px solid #9c9c9c;
}

textarea {
    resize: vertical;
    height: 100px;
}



@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 530px) {

    .imgcontainer[name="homephoto"] img {
        width: 90%; 
    }

    .imgcontainer[name="aboutphoto"] img {
        width: 55%; 
    }

    .tinytext {
        font-family: 'Monaco', monospace, 'FragmentMono';
        font-style: normal;
        font-weight: 100;
        font-size: 170%;
    }

    .textbox{
        font-size: 25px;
    }

    .albumcover-container {
        width: 50%;
        height: 16%;
    }
    .albumcover-container img {
        margin-bottom: 4%;
        margin-top: 6%;
    }

    .albumcover-container span {
        font-size:170%;
        width: 90%;
        margin: auto;
    }

    .video-container {
        margin-top: 4%;
        margin-bottom: -12%;
    }
    .video-container span {
        font-size: 170%;
    }

    .simple-button {
        font-size: 170%;
    }

    .form-group label {
        font-size: 170%;
    }

    .required {
        font-size: 70%
    }

    input, textarea {
        font-size: 170%;
    }
}