/*  Table of Conents:

    1. Import
    2. Root
    3. <a> Styling
    4. <details> Styling
    5. <iframe> Styling
    6. <table> Styling
    7. Info
    8. About
    9. Education
    10. Work
    11. Skills

*/

/* --- Imported --- */

@import url('https://fonts.googleapis.com/css2?family=Nixie+One&display=swap');

* {
    font-family: Calibri, sans-serif, monospace;
    box-sizing: border-box;
    margin: 0;
}

/* --- Root --- */

:root {
    --col-purple-1:                 hsla(267, 75%, 50%, 100%);
    --col-purple-1-op:              hsla(267, 75%, 50%, 50%);
    --col-purple-1-comp:            hsla(087, 75%, 50%, 100%);
    --col-purple-1-comp-light:      hsla(087, 75%, 80%, 100%);
    --col-purple-1-grad:            hsla(267, 75%, 70%, 100%);
    --col-purple-1-grad-op:         hsla(267, 75%, 70%, 50%);
    --col-purple-2:                 hsla(267, 75%, 90%, 100%); 
    --col-purple-2-grad:            hsla(267, 75%, 70%, 100%);
    --col-purple-2-comp:            hsla(088, 75%, 90%, 100%);

    --background-info-1:            var(--col-purple-1-op);
    --background-info-2:            var(--col-purple-1-grad-op);

    --box-background:               hsla(000, 00%, 100%, 25%);

    --box-border-2:                 var(--col-purple-1-comp);
    --box-link-colour:              var(--col-purple-1-comp);

    --link-color:                   var(--col-purple-1-comp);
    --background-color-1:           var(--col-purple-2);
    --background-color-2:           var(--col-purple-1-grad);
    --background-color-3:           var(--col-purple-1-comp-light);
    --background-color-4:           white;
    --text-color-1:                 black;

    --info-background:              var(--col-purple-1);
    --info-text:                    white;  

    --about-border:                 var(--col-purple-1-comp);

    --work-link:                    var(--col-purple-1-comp)
}


/* --- Links --- */

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration:        underline;
    text-decoration-color:  var(--link-color);
    cursor:                 pointer;
}

a:active {
    text-decoration: none;
}

/* --- Details --- */

.details-container {
    pointer-events: all;
    padding-top: 5%;
}

.details-container summary {
    color: whitesmoke;
}

.details-heading {
    padding-top: 2.5%;
}

.details-list {
    padding-top: 2.5%;
}

/* --- Map --- */
.iframe-link {
    pointer-events: all;
}

#education .iframe-link {
    color: white;
}

.iframe-link:hover .iframe {
    display: block;
}

.iframe {
    display: none;
    width: 100%;
}

/* --- Tables --- */

.grade-table {
    pointer-events: none;
    padding-top: 2.5%;
}

.grade {
    text-align: center !important;
}

.grade-row {
    width: 100%;
}

.grade-heading {
    text-decoration: underline;
    text-align: left;
}

.grade-cell {
    text-align: left;
}



/* --- Info --- */

#svg-container {
    background-image: url("header.svg");
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0 0 5% 5%;
}

#info {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    color:          var(--info-text);
    width:          100%;
    padding: 5%;
    padding-top: 7.5%;
}

#info p, h1, h2 {
    pointer-events: none;
}


#name {
    font-family: "Nixie One";
    font-size: 2.5em;
}

#location {
    color: white;
}

#email {
    color: var(--link-color);
}

#phone {
    color: white;
}

/* --- About --- */

#about {
    padding-top: 5%;
    padding-left: 10%;
    padding-bottom: 5%;
    padding-right: 10%;
    border: 2px dashed var(--about-border);
    margin: 10%;
    border-radius: 5%;
}

#about-title {
    color: black;
}

.about-text {
    text-align: justify;
    text-justify: inter-word;
}

/* --- Education --- */

#education-container {
    background: linear-gradient(    var(--background-color-4) 80%, 
                                    var(--background-color-3) 100%);    
}

#education {
    padding-top: 5%;
    padding-left: 10%;
    padding-bottom: 5%;
    padding-right: 10%;
    background: radial-gradient(    circle at var(--x-education) var(--y-education), 
                                    var(--background-color-2) 0%, 
                                    var(--background-color-1) 100%);
    border-radius: 2%;
}

.education-box {
    pointer-events: none;
    background: var(--box-background);
    margin-bottom: 2%;
    margin-top: 2%;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 2.5%;
    padding-bottom: 2.5%;
    border-radius: 5%;
}

.education-box h3 {
    color: black;
}

.education-box h4 {
    font-weight: normal;
    font-style: italic;
}

.education-box p {
    text-align: justify;
    text-justify: inter-word;
}

.education-link {
    color: white;
    pointer-events: all;
}

/* --- Work --- */

#work {
    padding-top: 5%;
    padding-left: 10%;
    padding-bottom: 5%;
    padding-right: 10%;
    background: linear-gradient(    var(--background-color-3) 0%, 
                                    var(--background-color-4) 20%);
}

.work-box {
    border: 2px dashed var(--box-border-2);
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 10%;
    padding-right: 10%;
    border-radius: 5%;
}

.work-box h3 {
    color: black;
}

.work-box h4 {
    font-weight: normal;
    font-style: italic;
}

.work-box p {
    text-align: justify;
    text-justify: inter-word;
}

.work-link {
    color: var(--work-link);
}

/* --- Skills --- */

#skills-container {
    background: linear-gradient(    var(--background-color-4) 80%, 
                                    var(--background-color-3) 100%);    
}

#skills {
    padding-top: 5%;
    padding-left: 10%;
    padding-bottom: 5%;
    padding-right: 10%;
    background: radial-gradient(    circle at var(--x-skills) var(--y-skills), 
                                    var(--background-color-2) 0%, 
                                    var(--background-color-1) 100%);
    border-radius: 2%;
    transition: font-weight 1s ease;
}

#skill-boxes {
    pointer-events: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#skills:hover .bold-transition {
    font-weight: bold;
}


.skills-box {
    pointer-events: none;
    font-weight: normal;
    background: var(--box-background);
    margin-bottom: 2%;
    margin-top: 2%;
    margin-right: 2.5%;
    margin-left: 2.5%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2.5%;
    padding-bottom: 2.5%;
    border-radius: 5%;
    width: 45%;
    display: flex;
    flex-direction: column;
}

.skills-box h3 {
    color: var(--text-color-1);
    align-self: center;
}

.skills-box p {
    text-align: justify;
    text-justify: inter-word;
    font-size: minmax(0.25rem, 1rem);
}

/* --- Certifications --- */

#certifications {
    padding: 10%;
    background: linear-gradient(    var(--background-color-3) 0%, 
                                    var(--background-color-4) 20%);
}

.certifications-box {
    margin-left: 10%;
    margin-right: 10%;
    border: 2px dashed var(--box-border-2);
    padding-top: 5%;
    padding-left: 10%;
    padding-bottom: 5%;
    padding-right: 10%;
    border-radius: 5%;
    margin-top: 2.5%;
    margin-bottom: 2.5;
}

.certifications-box h3 {
    color: black;
}

.certifications-box h4 {
    font-weight: normal;
    font-style: italic;
}

.certifications-box p {
    text-align: justify;
    text-justify: inter-word;
}

.certifications-link {
    color: var(--box-link-colour);
}