@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

html{
  scroll-behavior: smooth;
}

:root {
  --color-primary: #E63946;
  --color-primary-dark: #D62828;
  --color-primary-darker: #8B1E1E;
  
  --color-background: #F5E6D3;
  --color-background-light: #FFF8F0;
  --color-cream: #EDD9C0;
  
  --color-white: #FFFFFF;
  --color-black: #1A1A1A;
  --color-text: #2B2B2B;
  --color-text-light: #666666;
  
  --color-border: #E63946;
  --color-border-light: rgba(230, 57, 70, 0.3);
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  
  --gradient-red: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);

  --font-size-tiny: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-body: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.5rem;
  --font-size-xlarge: 2rem;
  --font-size-xxlarge: 2.5rem;
  --font-size-huge: 3rem;
  --font-size-title: 4.5rem;
  
  --font-heading: 'Bebas Neue', 'Oswald', sans-serif;
  --font-body: 'Courier New', 'Roboto Mono', monospace;
  --font-accent: 'Special Elite';

}

body{
    background-color: var(--color-background);
    max-width: 100vw;
}

h1 {
  font-size: var(--font-size-h1);
  font-family: var(--font-heading);
}

h2 {
  font-size: var(--font-size-h1);
  font-family: var(--font-heading);
}

p {
  font-size: var(--font-size-body);
  font-family: var(--font-body);
}

.small-text {
  font-size: var(--font-size-small);
}

.top{
    position: relative;
    width: 100%;
    height: 40dvh;
    /* border: solid var(--color-border); */
    /* background-color: blue; */
    padding: 5px 5px 0px 5px;
    display: flex;
    padding-bottom: 5px;
}

.first-col{
width: 40%;
}

.second-col{
width: 30%;
}

.bottom{
    position: relative;
    width: 100%;
    height: 60dvh;
    /* background-color: green; */
}
.border-box-top{
  background-color: var(--color-primary);
  width: 100%;

  /* max-width: 350px; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.border-box-skills{
  background-color: var(--color-background);
  border-top: 4px solid var(--color-border);
  border-right: 2px solid var(--color-border);
  border-bottom: 4px solid var(--color-border);
  border-left: 2px solid var(--color-border);
  width: 100%;
  max-width: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  height: 100%;
}

.title{  
  width: 100%;
    border: 1.5px solid var(--color-background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 5px 4px 5px 4px;
}

.title h2{
  color: var(--color-cream);
  font-size: var(--font-size-xxlarge);
  position: relative;
  text-align: right;
  margin-right: 5px;
  letter-spacing: 0.5px;

}

.skills{

  width: 97%;
  height: 99%;
  border: 1px solid var(--color-border);
}

.top-border{
  margin: 3px 1px 3px 1px;
  border-top: 3px solid var(--color-border);
  margin-top: 5px;
  margin: auto;
}

.skills-title{
  background-color: blue;
  margin: 3px 1px 3px 1px;
}

.icon-flex{
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  
}

.icon-flex i{
  min-height: 5vh;
  min-width: 5vh;
  border-radius: 2px;
  margin: auto;
  background-color: var(--color-cream);
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 515px) {
    .icon-flex
    {
      display: none;
    }    
    
    .title h1
    {
      font-size: var(--font-size-large);
    }

}

@media screen and (max-width: 380px) {

    .title h1
    {
      font-size: var(--font-size-medium);
    }

}


.name{
  text-transform: uppercase;
  font-size: 100%;
  text-align: center;

  align-items: center;
}

.name h1{
  font-size: var(--font-size-title);
  color: var(--color-primary);
}


.bottom{
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.experience{
  grid-area: 1 / 1 / 7 / 4;
  padding: 5px;
}

.experience-title{
  text-align: center;
  background-color: var(--color-primary);
  padding: 5px;
}

.experience-title-border{
  border: 4px solid var(--color-cream);
  
}

.experience-title h2{
  font-size: var(--font-size-huge);
  font-family: var(--font-heading);
  color: var(--color-cream);
}

.experience-liste li{
  font-size: var(--font-size-medium);
  font-family: var(--font-body);
  color: var(--color-border);
  font-weight: 500;
}

.experience-liste{
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--color-primary);
}

.experience-liste-box{
  
  border-bottom: dashed 1px var(--color-border);
}

.experience-liste-box h2{
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.experience-liste-box p{
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.education{
  grid-area: 1 / 4 / 4 / 11;
  /* background-color: red; */
  background-color: var(--color-primary);
  padding: 5px;
}

.education-title{
  align-items: center;
  justify-content: center;
  /* border-right: dashed 2px var(--color-cream); */
  color: var(--color-cream);
  padding: 5px;
  text-align: center;

}

.education-title h2{
  vertical-align: center;
  font-family: var(--font-heading);
  font-size: var(--font-size-huge);
}

.education-border{
  height: 100%;
  border: solid 2px var(--color-cream);
  padding: 5px;
}

.eductaion-liste{
  margin: auto;
  width: 100%;

}

.eductaion-liste ul{
  list-style: none;
}

.eductaion-liste li{
  border-bottom: 1px dashed var(--color-cream);
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: var(--font-size-large);
}

.interest{
  grid-area: 4 / 4 / 7 / 11;
  /* background-color: blue; */
  padding: 5px;
}

.interest-border{
  border: thick double var(--color-border);
  height: 100%;
}

.interest-title{
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-right: dashed 2px var(--color-cream); */
  color: var(--color-primary);

}

.interest-title h2{
  vertical-align: center;
  font-family: var(--font-heading);
  font-size: var(--font-size-huge);
}

.interest-liste{
  margin: auto;
  width: 100%;
  padding-left: 5px;
}

.interest-liste ul{
  list-style: none;
}

.interest-liste li{
  border-bottom: 1px dashed var(--color-border);
  color: var(--color-primary);
}

.interest-liste li h2{
  font-family: var(--font-heading);
  font-size: var(--font-size-large);

}

.interest-liste li p{
  font-family: var(--font-heading);
  font-size: var(--font-size-body);

}

@media screen and (max-width: 800px) {
    .bottom
    {
      display: contents;
    } 
    
    .education-border
    {
      display: contents;
    }

}