@media (min-width: 300px) {
  #profileimage {
    width: 100%;
  }
}

@media (min-width: 300px) {
  #thirdheading {
    font-family: Inter, sans-serif;
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid var(--bs-body-bg) ;
    padding-top: 10px;
  }
}

@media (min-width: 300px) {
  #whoami {
    padding-left: 12px;
    padding-right: 12px;
    margin-left: 0px;
    margin-bottom: 10px;
    margin-top: 10px;
    height: auto;
    width: 100%;
    font-size: 16px;
    color: rgb(255,255,255);
  }
}

@media (min-width: 300px) {
  #aboutmelink {
    padding-left: 13px;
    margin-top: 10px;
    color: var(--bs-body-bg);
    font-family: Inter, sans-serif;
    font-weight: bold;
    font-size: 16px;
  }
}

@media (min-width: 300px) {
  #fourthheading {
    font-size: 13px;
    font-family: Inter, sans-serif;
    padding-left: 12px;
    margin-top: 25px;
    padding-top: 10px;
    padding-bottom: 0px;
    border-top: 1px solid var(--bs-body-bg) ;
    margin-bottom: 10px;
  }
}

@media (min-width: 300px) {
  #whatidoimage {
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 20px;
    display: none;
  }
}

@media (min-width: 300px) {
  #whatidogallery {
    display: flex;
    margin-bottom: 0px;
    margin-top: -30px;
  }
}

@media (min-width: 300px) {
  #whatidolink {
    color: var(--bs-body-bg);
    font-size: 15px;
    font-family: Inter, sans-serif;
    font-weight: bold;
    padding-left: 12px;
  }
}

@media (min-width: 300px) {
  #fifthheading {
    font-size: 13px;
    padding-left: 12px;
    border-top: 1px solid var(--bs-body-bg) ;
    margin-top: 22px;
    padding-top: 10px;
    font-family: Inter, sans-serif;
    margin-bottom: 10px;
  }
}

@media (min-width: 300px) {
  #whoamipicture {
    padding-top: 0px;
    width: 100%;
  }
}

@media (min-width: 300px) {
  span {
    font-size: 30px;
  }
}

@media (min-width: 576px) {
  #profileimage {
    display: none;
  }
}

@media (min-width: 576px) {
  #profileimage2 {
    display: block !important;
  }
}

@media (min-width: 576px) {
  #thirdheading {
    margin-top: 35px;
  }
}

@media (min-width: 992px) {
  #profileimage2 {
    display: none !important;
  }
}

@media (min-width: 992px) {
  #whoamipicture {
    display: none;
  }
}

@media (min-width: 992px) {
  #thirdheading {
    display: none;
  }
}

@media (min-width: 992px) {
  #whoami {
    display: none;
  }
}

@media (min-width: 992px) {
  #aboutmelink {
    display: none;
  }
}

@media (min-width: 992px) {
  #whoamicontainer {
    display: block !important;
  }
}

@media (min-width: 992px) {
  #whoamiline {
    display: block !important;
    height: 1px;
    margin-right: 0px;
    margin-left: 0px;
    width: 100%;
    margin-bottom: 15px;
    border-top: 1px solid var(--bs-body-bg) ;
    margin-top: -10px;
  }
}

@media (min-width: 992px) {
  #whoamitext2 {
    padding-left: 8px;
  }
}

@media (min-width: 992px) {
  #whoamiiamge2 {
    margin-top: 15px;
  }
}

@media (min-width: 992px) {
  #aboutmelink2 {
    color: var(--bs-body-bg);
    font-family: Inter, sans-serif;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: -10px;
  }
}

@media (min-width: 992px) {
  #fourthheading {
    display: none;
  }
}

@media (min-width: 992px) {
  #workscontainer {
    display: none;
  }
}

@media (min-width: 992px) {
  #whatidolink {
    display: none;
  }
}

@media (min-width: 992px) {
  #whatido2 {
    color: var(--bs-body-bg);
    font-family: Inter, sans-serif;
    font-size: 15px;
    display: block !important;
    padding-top: 10px;
  }
}

@media (min-width: 992px) {
  #whatidoimage {
    width: 100%;
    padding-bottom: 32px;
    display: block;
    margin-top: 0px;
  }
}

@media (min-width: 992px) {
  #whatidogallery2 {
    display: block !important;
    margin-top: -20px;
    margin-bottom: -113px;
  }
}

@media (min-width: 992px) {
  #workslink2 {
    display: block !important;
    font-size: 20px;
  }
}

@media (min-width: 992px) {
  #gallerycontainer {
    padding-right: 14px;
    padding-left: 12px;
  }
}

@media (min-width: 992px) {
  #fifthheading {
    padding-left: 15px;
    margin-top: 10px;
    display: none;
  }
}

@media (min-width: 1200px) {
  #gallerycontainer {
    margin-top: -17px;
    padding-left: 11px;
    padding-right: 17px;
  }
}

@media (min-width: 1200px) {
  #fifthheading {
    padding-left: 36px;
    margin-top: 99px;
  }
}

@media (min-width: 1200px) {
  #whoamitext2 {
    padding-left: 6px;
    padding-right: 22px;
    font-size: 20px !important;
  }
}

@media (min-width: 1200px) {
  #aboutmelink2 {
    padding-left: 18px;
    margin-right: 6px;
    font-size: 20px;
    margin-top: 37px;
  }
}

@media (min-width: 1200px) {
  #whoamiiamge2 {
    padding-right: 7px;
  }
}

@media (min-width: 1200px) {
  #whoamiheading2 {
    padding-right: 4px;
  }
}

@media (min-width: 992px) {
  #workscontainer2 {
    padding-bottom: 26px;
  }
}

@media (min-width: 992px) {
  #whatidoline {
    display: block !important;
  }
}

@media (min-width: 1200px) {
  #whatidogallery {
    display: none;
  }
}

@media (min-width: 1400px) {
  #whoamiiamge2 {
    margin-top: -1px;
  }
}

@media (min-width: 1400px) {
  #aboutmelink2 {
    margin-top: 17px;
  }
}

@media (min-width: 1400px) {
  #fifthheading {
    margin-top: 98px;
  }
}

@media (min-width: 1400px) {
  #whatidoimage {
    margin-top: 34px;
    padding-bottom: 42px;
  }
}

@media (min-width: 1400px) {
  #workslink2 {
    margin-top: 6px;
    margin-bottom: -36px;
  }
}

@media (min-width: 1400px) {
  #workscontainer2 {
    margin-top: -21px;
  }
}

@media (min-width: 992px) {
  #gallerytext2 {
    display: block !important;
  }
}

@media (min-width: 992px) {
  #gallerytext1 {
    display: none;
    font-family: Inter, sans-serif;
  }
}

@media (min-width: 992px) {
  #gallerytext {
    display: block !important;
    padding-top: 6px;
  }
}

@media (min-width: 1200px) {
  #galleryline {
    margin-top: 100px !important;
    display: block;
  }
}

@media (min-width: 992px) {
  #galleryline {
    display: block !important;
    margin-right: 0px;
    margin-top: 30px;
  }
}

@media (min-width: 300px) {
  #aboutmeimage {
    width: 100%;
    margin-top: 10px;
  }
}

@media (min-width: 300px) {
  #aboutmeheading {
    font-family: Inter, sans-serif;
    color: var(--bs-light);
    font-size: 40px;
    margin-top: -50px;
    padding-left: 12px;
    padding-bottom: 0px;
  }
}

@media (min-width: 300px) {
  #itspecialistpicture {
    width: 100%;
  }
}

@media (min-width: 300px) {
  #fourthheadingaboutme {
    margin-top: 10px;
    padding-top: 10px;
    padding-left: 12px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    border-top-width: 1px;
    border-top-style: solid;
  }
}

@media (min-width: 300px) {
  #student {
    width: 100%;
  }
}

@media (min-width: 300px) {
  #whoami3 {
    font-family: Inter, sans-serif;
    color: var(--bs-light);
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 10px;
    margin-bottom: 0px;
  }
}

@media (min-width: 300px) {
  #musicianlink {
    text-decoration: none;
    color: var(--bs-light);
    font-family: Inter, sans-serif;
    padding-left: 11px;
    font-style: italic;
    font-size: 15px;
  }
}

@media (min-width: 300px) {
  #whoami4 {
    color: var(--bs-light);
    font-family: Inter, sans-serif;
    margin-top: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 576px) {
  #aboutmeheading {
    font-size: 60px;
    margin-top: -73px;
  }
}

@media (min-width: 992px) {
  #aboutmeimage2 {
    display: block !important;
    width: 70%;
    margin-left: 200px;
    margin-top: 10px;
  }
}

@media (min-width: 992px) {
  #aboutmeimage {
    display: none;
  }
}

@media (min-width: 992px) {
  #aboutmeheading {
    font-size: 90px;
    padding-left: 33px;
    margin-top: -277px;
    padding-bottom: 182px;
  }
}

@media (min-width: 992px) {
  #itspecialistpicture {
    display: none;
  }
}

@media (min-width: 992px) {
  #student {
    display: none;
  }
}

@media (min-width: 992px) {
  #musician {
    display: none;
  }
}

@media (min-width: 992px) {
  #creative {
    display: none;
  }
}

@media (min-width: 992px) {
  #itspecialistiheading2 {
    margin-bottom: 10px;
  }
}

@media (min-width: 992px) {
  #itspecialistiamge2 {
    width: 70%;
    margin-top: -30px;
  }
}

@media (min-width: 992px) {
  #itspecialisttext2 {
    border-right: 1px solid rgb(255, 255, 255) ;
    padding-top: 14px;
    padding-bottom: 12px;
    font-size: 16px;
  }
}

@media (min-width: 300px) {
  #itspecialist {
    color: var(--bs-light);
    font-family: Inter, sans-serif;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 10px;
  }
}

@media (min-width: 992px) {
  #thirdheadingaboutme {
    display: none;
  }
}

@media (min-width: 992px) {
  #itspecialist {
    display: none;
  }
}

@media (min-width: 992px) {
  #fourthheadingaboutme {
    display: none;
  }
}

@media (min-width: 992px) {
  #fifthheadingaboutme {
    display: none;
  }
}

@media (min-width: 992px) {
  #whoami3 {
    display: none;
  }
}

@media (min-width: 992px) {
  #musicianlink {
    display: none;
  }
}

@media (min-width: 992px) {
  #sixthheadingaboutme {
    display: none;
  }
}

@media (min-width: 992px) {
  #whoami4 {
    display: none;
  }
}

@media (min-width: 300px) {
  #whatido2 {
    display: none;
  }
}

@media (min-width: 992px) {
  #it-specialistcontainer {
    display: block !important;
  }
}

@media (min-width: 300px) {
  #itspecialist-1 {
    color: var(--bs-light);
    font-family: Inter, sans-serif;
    padding-bottom: 19px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 992px) {
  #itspecialist-1 {
    display: none;
  }
}

@media (min-width: 992px) {
  #itspecialistline {
    display: block !important;
    padding-bottom: 10px;
    margin-top: -10px;
    margin-right: 0px;
  }
}

@media (min-width: 992px) {
  #studentline {
    border-top-width: 1px;
    border-top-style: solid;
    display: block !important;
  }
}

@media (min-width: 300px) {
  #studentcontainer {
    display: none;
  }
}

@media (min-width: 992px) {
  #studentcontainer {
    display: block;
    margin-bottom: -21px;
  }
}

@media (min-width: 300px) {
  #studentheading {
    display: none;
  }
}

@media (min-width: 992px) {
  #studentheading {
    display: block;
    border-right-style: none;
  }
}

@media (min-width: 300px) {
  #studentimage2 {
    display: none;
  }
}

@media (min-width: 992px) {
  #studentimage2 {
    display: block;
    width: 80%;
    margin-left: 84px;
    margin-top: -17px;
    height: auto;
  }
}

@media (min-width: 300px) {
  #studenttext {
    display: none;
  }
}

@media (min-width: 992px) {
  #studenttext {
    display: block;
    text-align: left;
    font-size: 16px;
    border-left-width: 1px;
    border-left-style: solid;
    padding-left: 15px;
    margin-left: -15px;
  }
}

@media (min-width: 300px) {
  #musiciancontainer {
    display: none;
  }
}

@media (min-width: 992px) {
  #musiciancontainer {
    display: block;
    margin-bottom: 26px;
  }
}

@media (min-width: 300px) {
  #musicianline {
    display: none;
  }
}

@media (min-width: 992px) {
  #musicianline {
    display: block;
    border-top: 1px solid var(--bs-light) ;
  }
}

@media (min-width: 300px) {
  #creativecontainer {
    display: none;
  }
}

@media (min-width: 992px) {
  #creativecontainer {
    display: block;
  }
}

@media (min-width: 992px) {
  #creativeimage2 {
    width: 80%;
    margin-left: 86px;
    margin-top: -11px;
  }
}

@media (min-width: 300px) {
  #creativeline {
    display: none;
  }
}

@media (min-width: 992px) {
  #creativeline {
    display: block;
    margin-top: -4px;
  }
}

@media (min-width: 992px) {
  #studenttext-1 {
    padding-left: 15px;
    margin-left: -15px;
    border-left: 1px solid var(--bs-light) ;
  }
}

@media (min-width: 992px) {
  #studentheading-1 {
    margin-top: 0px;
  }
}

@media (min-width: 1200px) {
  #itspecialisttext2 {
    padding-top: 39px;
    padding-bottom: 44px;
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  #studenttext {
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  #musictext2 {
    padding-top: 18px;
    padding-bottom: 55px;
  }
}

@media (min-width: 1200px) {
  #studenttext-1 {
    padding-top: 24px;
    padding-bottom: 28px;
  }
}

@media (min-width: 1400px) {
  #aboutmeheading {
    margin-top: -358px;
    font-size: 110px;
    margin-bottom: 67px;
    padding-left: 53px;
  }
}

@media (min-width: 1400px) {
  #itspecialisttext2 {
    font-size: 22px;
    padding-bottom: 27px;
  }
}

@media (min-width: 1400px) {
  #itspecialistiamge2 {
    width: 80%;
    margin-top: -27px;
  }
}

@media (min-width: 1400px) {
  #studenttext {
    font-size: 22px;
    padding-top: 0px;
    padding-bottom: 4px;
  }
}

@media (min-width: 1400px) {
  #studentimage2 {
    margin-left: 120px !important;
    margin-top: -28px !important;
  }
}

@media (min-width: 1400px) {
  #musictext2 {
    font-size: 22px !important;
  }
}

@media (min-width: 992px) {
  #musictext2 {
    font-size: 16px;
    padding-bottom: 58px;
    margin-bottom: -49px;
  }
}

@media (min-width: 992px) {
  #musicimage2 {
    width: 80%;
    margin-top: -34px;
  }
}

@media (min-width: 1200px) {
  #studentimage2 {
    margin-top: -35px;
    margin-left: 105px;
  }
}

@media (min-width: 1200px) {
  #musicimage2 {
    width: 65%;
  }
}

@media (min-width: 1200px) {
  #creativeimage2 {
    margin-left: 102px;
  }
}

@media (min-width: 1400px) {
  #musicianlink2 {
    font-size: 21px;
  }
}

@media (min-width: 1400px) {
  #musicimage2 {
    width: 80%;
  }
}

@media (min-width: 1400px) {
  #studenttext-1 {
    font-size: 22px;
    padding-top: 0px;
    padding-bottom: 9px;
  }
}

@media (min-width: 1600px) {
  #aboutmeheading {
    padding-left: 146px;
    margin-top: -402px;
    padding-bottom: 225px;
  }
}

@media (min-width: 1900px) {
  #aboutmeheading {
    font-size: 144px;
    margin-top: -486px;
    padding-bottom: 273px;
  }
}

@media (min-width: 1600px) {
  #aboutmeimage2 {
    margin-left: 275px;
  }
}

@media (min-width: 1900px) {
  #aboutmeimage2 {
    margin-left: 287px !important;
  }
}

@media (min-width: 1400px) {
  #aboutmeimage2 {
    margin-left: 216px;
  }
}

@media (min-width: 300px) {
  #contactheading {
    font-size: 47px;
  }
}

@media (min-width: 300px) {
  #contactcontainer {
    padding-top: 12px;
  }
}

@media (min-width: 300px) {
  #contactemail {
    font-size: 14px;
    margin-top: 34px;
  }
}

@media (min-width: 300px) {
  #contactemail-1 {
    font-size: 14px;
  }
}

@media (min-width: 300px) {
  #impressum {
    padding-top: 12px;
    font-size: 10px;
  }
}

@media (min-width: 576px) {
  #contactemail {
    margin-top: 101px;
  }
}

@media (min-width: 768px) {
  #contactheading {
    font-size: 82px;
  }
}

@media (min-width: 768px) {
  #contactemail {
    font-size: 16px;
    margin-top: 130px;
  }
}

@media (min-width: 768px) {
  #contactemail-1 {
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  #impressum {
    font-size: 13px;
  }
}

@media (min-width: 992px) {
  #contactheading {
    font-size: 115px;
  }
}

@media (min-width: 992px) {
  #contactemail {
    font-size: 25px;
  }
}

@media (min-width: 992px) {
  #contactemail-1 {
    font-size: 25px;
  }
}

@media (min-width: 992px) {
  #impressum {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  #contactemail {
    font-size: 30px;
  }
}

@media (min-width: 1200px) {
  #contactemail-1 {
    font-size: 35px;
  }
}

@media (min-width: 1400px) {
  #contactheading {
    font-size: 144px;
  }
}

@media (min-width: 1400px) {
  #contactemail {
    font-size: 35px;
    margin-top: 220px;
  }
}

@media (min-width: 1400px) {
  #contactemail-1 {
    margin-top: 82px;
  }
}

@media (min-width: 1400px) {
  #impressum {
    font-size: 20px;
  }
}

@media (min-width: 300px) {
  #columnheading1 {
    width: 60%;
  }
}

@media (min-width: 300px) {
  #worksheading {
    font-size: 75px;
    font-family: Inter, sans-serif;
    color: var(--bs-light);
    margin-bottom: 0px;
  }
}

@media (min-width: 300px) {
  #worksheading2 {
    font-family: Cormorant, serif;
    color: var(--bs-light);
    font-style: italic;
    font-size: 25px;
  }
}

@media (min-width: 300px) {
  #columnheading2 {
    width: 40%;
  }
}

@media (min-width: 300px) {
  .workheadercolumn {
    padding-top: 5px;
  }
}

@media (min-width: 300px) {
  .workheader {
    font-family: Inter, sans-serif;
    font-size: 25px;
    margin-bottom: 0px;
  }
}

@media (min-width: 300px) {
  .worktimecolumn {
    width: 104px;
    padding-right: 0px;
  }
}

@media (min-width: 300px) {
  .worktime {
    font-family: Cormorant, serif;
    font-style: italic;
    font-size: 20px;
    width: 100.7875px;
  }
}

@media (min-width: 300px) {
  .workdescriptioncolumn {
    padding-left: 0px;
    width: 50%;
  }
}

@media (min-width: 300px) {
  .workdescription {
    font-size: 15px;
    margin-top: 5px;
  }
}

@media (min-width: 300px) {
  .worklinkcontainer {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (min-width: 300px) {
  .worklink {
    text-decoration: none;
    color: var(--bs-light);
    font-family: Inter, sans-serif;
    font-weight: bold;
  }
}

@media (min-width: 576px) {
  .worktimecolumn {
    width: 19%;
  }
}

@media (min-width: 768px) {
  .workheadercolumn {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .worktimecolumn {
    width: 14%;
  }
}

@media (min-width: 768px) {
  .workdescriptioncolumn {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .imagecolumn {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .worklinkcontainer {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .workcontainer {
    display: none;
  }
}

@media (min-width: 992px) {
  #worksheading {
    font-size: 144px;
  }
}

@media (min-width: 992px) {
  #worksheading2 {
    font-size: 61px;
    margin-bottom: 30px;
  }
}

@media (min-width: 300px) {
  #workslinie {
    padding-bottom: 10px;
  }
}

@media (min-width: 992px) {
  #workslinie {
    margin-top: -30px;
  }
}

@media (min-width: 300px) {
  .workcontainer2 {
    display: none;
  }
}

@media (min-width: 992px) {
  .workcontainer2 {
    display: flex;
    border-bottom: 1px solid var(--bs-light) ;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
}

@media (min-width: 992px) {
  .workdescription2 {
    font-size: 20px;
    margin-bottom: 0px;
    width: 100%;
  }
}

@media (min-width: 992px) {
  .worktitle2 {
    font-size: 35px;
    margin-bottom: 0px;
    width: 100%;
    line-height: 35.5px;
  }
}

@media (min-width: 992px) {
  .worktime2 {
    font-size: 30px;
    margin-bottom: 0px;
    width: 100%;
  }
}

@media (min-width: 992px) {
  .worktitlecolumn2 {
    padding-right: 0px;
    display: flex;
    width: 30%;
    padding-left: 0px;
  }
}

@media (min-width: 992px) {
  .workimagecolumn2 {
    padding-left: 0px;
    padding-right: 0px;
    width: 40%;
  }
}

@media (min-width: 992px) {
  .worklink2 {
    text-decoration: none;
    margin-left: 47px;
  }
}

@media (min-width: 992px) {
  .worktimecolumn2 {
    width: 30%;
    padding-right: 0px;
  }
}

@media (min-width: 1200px) {
  .worktitle2 {
    font-size: 40px;
  }
}

@media (min-width: 1400px) {
  .workdescription2 {
    font-size: 25px;
  }
}

@media (min-width: 1400px) {
  .worktitle2 {
    font-size: 50px;
    line-height: 56.5px;
  }
}

@media (min-width: 1400px) {
  .worktime2 {
    font-size: 35px;
  }
}

@media (min-width: 1400px) {
  .worklink2 {
    font-size: 20px;
    margin-left: 20px !important;
  }
}

@media (min-width: 1400px) {
  .worktimecolumn2 {
    width: 25%;
  }
}

@media (min-width: 1400px) {
  .workimagecolumn2 {
    width: 45%;
  }
}

@media (min-width: 1400px) {
  .worktitlecolumn2 {
    width: 30%;
  }
}

@media (min-width: 1200px) {
  #whatidoline {
    margin-bottom: -9px;
  }
}

@media (min-width: 1400px) {
  #whatidoline {
    margin-bottom: 11px;
  }
}

@media (min-width: 992px) {
  #whatidocontainer {
    margin-top: 10px;
    margin-bottom: -55px;
  }
}

@media (min-width: 1200px) {
  #whatido2 {
    padding-top: 45px;
  }
}

@media (min-width: 1200px) {
  #whatidocontainer {
    margin-top: 0px;
    margin-bottom: -66px;
  }
}

@media (min-width: 1400px) {
  #whatido2 {
    padding-top: 20px;
  }
}

@media (min-width: 1400px) {
  #whatidocontainer {
    margin-bottom: -44px;
  }
}

@media (min-width: 1200px) {
  .worklink2 {
    margin-left: 100px;
  }
}

@media (min-width: 300px) {
  .exampleworktitlecontainer {
    display: flex;
  }
}

@media (min-width: 300px) {
  .backarrow {
    width: 50px;
    margin-top: 10px;
  }
}

@media (min-width: 300px) {
  .exampleworktitle {
    font-size: 40px;
    padding-left: 10px;
  }
}

@media (min-width: 300px) {
  .exampleworktimecontainer {
    margin-top: -10px;
  }
}

@media (min-width: 300px) {
  .exampleworttime {
    font-size: 25px;
    width: 120%;
  }
}

@media (min-width: 300px) {
  .exampleworkdescription {
    padding-bottom: 4px;
    padding-left: 0px;
    width: 185.0312px;
    margin-left: -29px;
  }
}

@media (min-width: 300px) {
  .exampleworttimecolumn {
    width: 50%;
    margin-right: -10px;
    margin-top: -5px;
  }
}

@media (min-width: 300px) {
  .exampleworkdescriptioncolumn {
    width: 50%;
    padding-left: 0px;
  }
}

@media (min-width: 300px) {
  .backarrowcolumn {
    position: absolute;
    width: 80%;
  }
}

@media (min-width: 300px) {
  .exampleworktitlecolumn {
    padding-left: 0px;
    margin-top: 5px;
    padding-right: 0px;
    text-align: center;
  }
}

@media (min-width: 300px) {
  .whatiused1 {
    font-size: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 12px;
  }
}

@media (min-width: 300px) {
  .icon1 {
    width: 12%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 12px;
  }
}

@media (min-width: 300px) {
  .icon2 {
    padding-right: 0px;
    padding-left: 0px;
    width: 12%;
  }
}

@media (min-width: 300px) {
  .icon3 {
    width: 25%;
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media (min-width: 300px) {
  .creditname {
    color: var(--bs-light);
    font-family: Inter, sans-serif;
    margin-bottom: 5px;
    padding-left: 12px;
  }
}

@media (min-width: 300px) {
  .credits1 {
    margin-bottom: 5px;
    font-size: 10px;
  }
}

@media (min-width: 300px) {
  .workimage1 {
    width: 100%;
  }
}

@media (min-width: 300px) {
  .image1container {
    padding-bottom: 10px;
  }
}

@media (min-width: 300px) {
  .workbeschreibung {
    padding-left: 12px;
    padding-right: 12px;
    color: var(--bs-light);
    font-family: Inter, sans-serif;
    margin-bottom: 10px;
  }
}

@media (min-width: 300px) {
  .workgalleryheading {
    color: var(--bs-light);
    font-family: Inter, sans-serif;
    font-size: 10px;
    text-align: left;
    margin-top: -15px;
  }
}

@media (min-width: 300px) {
  .photos, .workgalleryphotos {
    margin-top: -55px;
  }
}

@media (min-width: 300px) {
  .linie1-4 {
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
  }
}

@media (min-width: 768px) {
  .whatiused1 {
    font-size: 13px;
  }
}

@media (min-width: 768px) {
  .credits1 {
    font-size: 13px;
  }
}

@media (min-width: 576px) {
  .exampleworkdescription {
    width: 177.0312px;
    margin-left: -24px;
  }
}

@media (min-width: 992px) {
  .smallscreen {
    display: none;
  }
}

@media (min-width: 992px) {
  .backarrow2 {
    width: 40px;
    margin-left: -5px;
    margin-top: 0px;
  }
}

@media (min-width: 992px) {
  .exampleworktitle2 {
    font-size: 50px;
    margin-bottom: 0px;
    margin-top: 15px;
  }
}

@media (min-width: 992px) {
  .exampleworkdatum2 {
    font-size: 39px;
    margin-bottom: 15px;
  }
}

@media (min-width: 992px) {
  .whatiused2 {
    margin-bottom: 10px;
  }
}

@media (min-width: 992px) {
  .creditsname2 {
    font-family: Inter, sans-serif;
    color: var(--bs-light);
    font-size: 20px;
    margin-bottom: 0px;
  }
}

@media (min-width: 992px) {
  .credits2 {
    margin-top: 15px;
    margin-bottom: 10px;
  }
}

@media (min-width: 992px) {
  .exampleworktitlecontainer2 {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bs-light) ;
  }
}

@media (min-width: 992px) {
  .exampleworktext2 {
    color: var(--bs-light);
    font-family: Inter, sans-serif;
    font-size: 19px;
  }
}

@media (min-width: 992px) {
  .exampleworkfrontimage2 {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .descriptioncontainer2 {
    margin-top: 20px;
    border-bottom: 1px solid var(--bs-light);
    padding-bottom: 16px;
  }
}

@media (min-width: 992px) {
  .workgalleryheading {
    font-size: 16px;
  }
}

@media (min-width: 300px) {
  .bigscreen {
    display: none;
  }
}

@media (min-width: 992px) {
  .bigscreen {
    display: block;
  }
}

@media (min-width: 300px) {
  .linie1-1 {
    margin-right: 0px;
    margin-left: 0px;
  }
}

@media (min-width: 300px) {
  .linie1-2 {
    margin-right: 0px;
    margin-left: 0px;
  }
}

@media (min-width: 300px) {
  .linie1-3 {
    margin-right: 0px;
    margin-left: 0px;
  }
}

@media (min-width: 300px) {
  #gallerytext1 {
    margin-bottom: 60px;
  }
}

@media (min-width: 992px) {
  .photos {
    margin-top: 0px;
  }
}

@media (min-width: 576px) {
  .workdescription {
    margin-left: 2px;
  }
}

@media (min-width: 768px) {
  .navbar {
    height: 50px;
  }
}

@media (min-width: 300px) {
  .navbar-brand {
  }
}

#fade-out {
  animation: fadeOut 5s forwards;
}

.youtube {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding-right: 12px;
}

.video-container {
  position: relative;
  width: 50%;
  padding-bottom: 27.5%;
  overflow: hidden;
  padding-right: 12px;
}

.video-container-mini {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
}

@media (min-width: 300px) {
  #p5logosoundcontrol {
    display: none;
  }
}

@media (min-width: 576px) {
  #p5logosoundcontrol {
    display: block;
  }
}

@media (min-width: 300px) {
  #p5soundcontrol2 {
  }
}

@media (min-width: 576px) {
  #p5soundcontrol2 {
    display: none;
  }
}

@media (min-width: 992px) {
  #githubsoundcontrol {
    margin-top: 10px;
  }
}

@media (min-width: 1200px) {
  #githubsoundcontrol {
    margin-top: 0px;
  }
}

@media (min-width: 992px) {
  #figmasoundcontrol {
    margin-top: 10px;
  }
}

@media (min-width: 1400px) {
  #figmasoundcontrol {
    margin-top: 0px;
  }
}

#soundcontrol-video-container {
  padding-bottom: 0%;
  margin-bottom: 13.8%;
  margin-top: 13.8%;
}

@media (min-width: 300px) {
  #profileimage3 {
    display: none;
  }
}

@media (min-width: 992px) {
  #profileimage3 {
    display: block;
    margin-top: 10px;
  }
}

@media (min-width: 300px) {
  #profileimage2 {
    width: 100%;
  }
}

@media (min-width: 300px) {
  #homecolumn {
  }
}

@media (min-width: 300px) {
  #homecolumn2 {
    width: 100%;
  }
}

@media (min-width: 300px) {
  #startrow {
    margin-right: 0px;
    margin-left: 0px;
    width: 100%;
  }
}

@media (min-width: 300px) {
  #mainheading {
    font-size: 40px;
    margin-top: -100px;
  }
}

@media (min-width: 300px) {
  #secondheading {
    margin-bottom: 0px;
    font-size: 20px;
    margin-top: 10px;
  }
}

@media (min-width: 300px) {
  #startcontainer {
    padding-right: 0px;
    padding-left: 0px;
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media (min-width: 576px) {
  #startrow {
  }
}

@media (min-width: 576px) {
  #startcontainer {
  }
}

@media (min-width: 576px) {
  #mainheading {
    font-size: 70px;
    line-height: 65px;
    margin: -139px 0px 8px;
    margin-top: -138px;
  }
}

@media (min-width: 576px) {
  #secondheading {
    font-size: 22px;
    margin-bottom: -15px;
    margin-top: 20px;
  }
}

@media (min-width: 768px) {
  #mainheading {
    font-size: 100px;
    line-height: 100px;
    margin-top: -207px;
  }
}

@media (min-width: 768px) {
  #secondheading {
    font-size: 29px;
    margin-top: 15px;
  }
}

@media (min-width: 768px) {
  #homecolumn {
  }
}

@media (min-width: 992px) {
  #mainheading {
    font-size: 80px;
    margin-top: -465px;
    line-height: 78px;
  }
}

@media (min-width: 992px) {
  #secondheading {
    width: 56%;
    margin-bottom: 190px;
    margin-top: -277px;
  }
}

@media (min-width: 1200px) {
  #mainheading {
    margin-top: -531px;
    font-size: 107px;
    line-height: 92px;
  }
}

@media (min-width: 1200px) {
  #secondheading {
    font-family: Inter, sans-serif;
    width: 51%;
    margin-bottom: 220px;
    margin-top: -304px;
  }
}

@media (min-width: 1400px) {
  #mainheading {
    width: 100%;
    margin-top: -612px;
    font-size: 115px;
    line-height: 101px;
  }
}

@media (min-width: 1400px) {
  #secondheading {
    font-size: 34px;
    width: 679.078px;
    margin-top: -346px;
    margin-bottom: 240px;
  }
}

@media (min-width: 300px) {
  #starttext1 {
  }
}

@media (min-width: 992px) {
  #starttext1 {
    padding-left: 24px;
  }
}

@media (min-width: 1200px) {
  #starttext1 {
    padding-left: 20px;
  }
}

@media (min-width: 1400px) {
  #starttext1 {
    padding-left: 18px;
  }
}