@import url(player.css);
@import url(headerandfooter.css);
@import url(default.css);

/*page buttons*/
.page-button { 
    background-color: black; 
    color: red; 
    border-color: red; 
    border: 5px; 
    height: 50px; 
    min-width: 70px; 
    cursor: pointer; 
    font-size: 20px; 
    margin-right: 3.5px; 
    margin-left: 3.5px; 
    font-weight: bold; transition: 
    background-color 0.25s; 
}
.page-button:hover { 
    background-color: red; 
    color: black; 
    border-color: rgb(120,0,0); 
} 
.page-button:active { 
    opacity: 0.6 
}
/*displays and boxes*/
.textbox { 
    width: 1188px;
    border: 5px solid red; 
    background: black; 
    margin-top: 80px; 
    margin-bottom: 80px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 50px; 
    display: block; 
} 
.link-box { 
    width: 1138px; 
    border: 5px solid red;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    text-align: center;
    background-color: black;
 }
.container { 
    display: flex; 
    flex-wrap: wrap;
    justify-content: center; 
    align-items: center; 
    align-content: center; 
    max-width: 100%;
    gap: 25px; 
    margin-top: 50px;
    margin-bottom: 20px;
 }
.website { 
    border: 5px solid red; 
    border-radius: 10px;
    width: 275px; 
    height: 450px; 
    background: black; 
    padding: 30px; 
    text-align: center;
    overflow: auto;
}
.name-image{
    display: grid;
    grid-template-areas: 
    "name image";
    width: 100%;
}
.image-display { 
    grid-area: image;
    width: 200px; 
    margin-left: auto; 
    margin-right: auto;
} 
.image-display:hover { 
    transform: scale(1.4); 
    transition: transform 0.25s; 
}
.website-link { 
    height: 31px; 
    width: 88px; 
}
/*texts*/
.intro-text { 
    max-Width: 950px; 
    font-size: 21px; 
    margin-left: auto; 
    margin-right: auto;
    text-align: center;
}
.name {
    grid-area: name;
    text-align: center;
    color: red; 
    margin-top: 175px;
    margin-bottom: 0px; 
    font-size: 22px;
    max-width: 200px;
}
.social-links { 
    color: red; 
    font-size: 20px;
}